<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组和对象的监测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
    <li v-for="(v,i) in array1" :key="i">{{v}}</li>
</ul>
    <button @click="pushAction">poshAction</button>
    <button @click="changeActon">changeActon</button>
    <ul>
        <li v-for="(v,k) in person" :key="k">
            {{v}}
        </li>
    </ul>
    <button @click="changePerson">修改值</button>
    <button @click="addPerson">新增属性值</button>
    <button @click="replacePerson">替换</button>

</div>
</body>
</html>
<script>
    new Vue({
        //数据
        data:{
            array1:[100,300,400,700],
            person:{
name :"小李",
                age: "89",
                sex:"未知"

            },

        },
        //函数
        methods:{
            pushAction(){
                this.array1.push(Math.floor(Math.random()*1000))
            },
            changeActon(){
//                es6覆盖
                this.array1={...this.array1};
Vue.set(this.array1,2,500);
            },
            changePerson(){
                this.person.age="91"
            },
            addPerson(){
// this.person.school="幼稚园";
Vue.set(this.person,"school","幼稚园");
                this.person=Object.assign({},this.person,{
                    school:"北京大学",
                    home:"郑州",
                    gf:"小宝贝"
                })
            },
            replacePerson(){
                this.person={
name: "挣钱",
                    age:30,
                    sex:"男"
                }
            }
        },
    }).$mount("#root")
</script>